<template>
  <view>
    <!-- 音乐列表 -->
    <view class="list-music">
      <view class="list-music-item" v-for="(item, index) in playlist.tracks" :key="item.id" >
        <!-- 序号 -->
        <view class="list-music-index">{{ index + 1 }}</view>
        <!-- 歌曲信息 -->
        <view class="list-music-song">
          <view>{{ item.name }}</view>
          <view>
            <!-- 判断是否独家音频 -->
            <image v-if="privileges[index].flag > 60 && privileges[index].flag < 70" src="/static/dujia.png" mode=""></image>
            <!-- 判断是否为无损音质 -->
            <image v-if="privileges[index].maxbr === 999000" src="/static/sq.png" mode=""></image>
            {{ item.ar[0].name }} - {{ item.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
	import {
		musicList
	} from '../../commom/api.js'
	export default {
		data() {
			return {
				playlist: {
					coverImgUrl: '',
					trackCount: '',
					creator: ''
				},
				privileges: [],
				isShow: false
			}
		},
  // 页面加载时获取音乐列表数据
		onLoad(options) {
			let listId = options.listid;
			musicList(listId).then((res) => {
				if (res.data.code == '200') {
					this.title = res.data.playlist.name
					this.playlist = res.data.playlist
					this.privileges = res.data.privileges
					this.isShow = true
				}
			});

		},
		methods: {

		}
	}
</script>

<style>
	.list-music-item {
		display: flex;
		margin: 0 25rpx 70rpx 44rpx;
		align-items: center;
	}

	.list-music-index {
		width: 60rpx;
		font-size: 35rpx;
		color: #979797;
	}

	.list-music-song {
		flex: 1;
		line-height: 40rpx;
	}

	.list-music-song view:nth-child(1) {
		font-size: 35rpx;
		width: 70vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.list-music-song view:nth-child(2) {
		font-size: 25rpx;
		color: #a2a2a2;
		width: 70vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.list-music-song image {
		width: 34rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.list-music-item text {
		font-size: 50rpx;
		color: #c8c8c8;
	}
</style>